import 'package:eyepetizer_example/config/string.dart';
import 'package:eyepetizer_example/page/video/video_detail_page.dart';
import 'package:eyepetizer_example/utils/toast_util.dart';
import 'package:eyepetizer_example/widget/app_bar.dart';
import 'package:eyepetizer_example/widget/go_navigation.dart';
import 'package:eyepetizer_example/widget/video/video_item_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

import '../viewmodel/watch_history_viewmodel.dart';
import '../widget/provider_widget.dart';

class WatchHistoryPage extends StatefulWidget {
  const WatchHistoryPage({Key? key}) : super(key: key);

  @override
  State<WatchHistoryPage> createState() => _WatchHistoryPageState();
}

class _WatchHistoryPageState extends State<WatchHistoryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(AppString.watch_history),
      body: ProviderWidget<WatchHistoryViewModel>(
        model: WatchHistoryViewModel(),
        onModelInit: (model){
          model.loadData();
        },
        builder: (context, model, child){
          return Stack(
            children: [
              _haveData(model),
              _noData(model),
            ],
          );
        },
      ),
    );
  }

  Widget _haveData(WatchHistoryViewModel model) {
    return Offstage(
      offstage: model.itemList.isEmpty,
      child: Container(
        decoration: const BoxDecoration(color: Colors.white),
        child: ListView.separated(
          itemCount: model.itemList.length,
          itemBuilder: (context, index){
            // 侧滑删除
            return _slidable(model, index);
          },
          separatorBuilder: (context, index){
            return const Padding(
              padding: EdgeInsets.only(left: 15, top: 5, right: 15),
              child: Divider(height: 0.5,),
            );
          },
        ),
      ),
    );
  }

  Widget _slidable(WatchHistoryViewModel model, int index) {
    return Slidable(
      endActionPane: ActionPane(
        motion: const ScrollMotion(),
        children: [
          SlidableAction(
            // An action can be bigger than the others.
            flex: 2,
            onPressed: (context){
              model.remove(index);
            },
            backgroundColor: const Color(0xFFFE4A49),
            foregroundColor: Colors.white,
            icon: Icons.delete,
            label: '删除',
          ),
        ],
      ),
      child: VideoItemWidget(
        data: model.itemList[index],
        callback: () {
          GoNavigator.toPage(context, VideoDetailPage(model.itemList[index]));
        },
        titleColor: Colors.black87,
        categoryColor: Colors.black26,
        openHero: true,
      ),
    );
  }

  /// 没有数据时显示的Widget
  Widget _noData(WatchHistoryViewModel model) {
    return Offstage(
      //控制控件显示或隐藏
      offstage: model.itemList.isNotEmpty,
      child: Center(
        child: Image.asset(
          'images/ic_no_data.png',
        ),
      ),
    );
  }
}
